<template>
  <SearchBar @search="onSearch" />
  <el-button type="primary" @click="cateAddDialogVisible = true">新增商品分类</el-button>
  <el-table :data="cates" row-key="id" height="500px">
    <el-table-column label="分类名" prop="cateName"></el-table-column>
    <el-table-column label="排序" prop="sort">
      <template #default="{ row }">
        <el-tag>{{ row.sort }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="是否显示" prop="cateStatus">
      <template #default="{ row }">
        <el-switch
          v-model="row.cateState"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          :active-value="1"
          :inactive-value="0"
          active-text="显示"
          inactive-text="隐藏"
          inline-prompt
          @change="switchCateState(row.id, row.cateState)"
        />
      </template>
    </el-table-column>
    <el-table-column label="分类图标" prop="cateIcon">
      <template #default="{ row }">
        <el-image :src="row.cateIcon" style="width: 50px" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button
          type="primary"
          @click="showCateEditDialog(row.id)"
          v-has-role-directive="['admin', 'a', 'b']"
          >编辑</el-button
        >
        <el-button
          type="danger"
          @click="delCate(row.id)"
          v-has-role-directive="['a', 'b']"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 新增商品分类弹窗 -->
  <el-dialog v-model="cateAddDialogVisible" title="新增分类" width="50%">
    <CateAdd />
  </el-dialog>
  <!-- /新增商品分类弹窗 -->
  <!-- 修改商品分类弹窗 -->
  <el-dialog v-model="cateEditDialogVisible" title="修改分类" width="50%">
    <CateEdit :cateId="cateId" />
  </el-dialog>
  <!-- /修改商品分类弹窗 -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { Cate } from "@t/cate";
import { getCates, updateCate, delCate as deleteCate } from "@a/cate";
import SearchBar from "@/components/SearchBar.vue";
import CateAdd from "./components/CateAdd.vue";
import CateEdit from "./components/CateEdit.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import vHasRoleDirective from "@/directives/auth";
// 列表搜索参数
let searchParams = {};
// 分类列表数组
const onSearch = (_searchParams: any) => {
  searchParams = _searchParams;
  fetchCates();
};
const cates = ref<Cate[]>([]);
const fetchCates = () => {
  getCates(searchParams).then((res: any) => {
    if (res.code === 200) {
      cates.value = res.data;
    }
  });
};
onMounted(() => {
  fetchCates();
});

// 点击开关修改 分类显示隐藏状态
const switchCateState = (id: number, cateState: number) => {
  updateCate({
    id,
    cateState,
  }).then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        type: "success",
        message: res.msg,
        duration: 1500,
        onClose: () => {
          searchParams = {};
          fetchCates();
        },
      });
    } else {
      ElMessage.error(res.msg);
    }
  });
};

// 新增商品分类弹窗
const cateAddDialogVisible = ref(false);

// 修改商品分类
const cateId = ref(0);
const cateEditDialogVisible = ref(false);
const showCateEditDialog = (id: number) => {
  cateId.value = id;
  cateEditDialogVisible.value = true;
};

// 删除商品分类
const delCate = (id: number) => {
  // 确认框
  ElMessageBox.confirm("此操作会彻底删除该分类,继续吗?", "删除分类").then(() => {
    deleteCate(id).then((res: any) => {
      if (res.code === 200) {
        ElMessage({
          type: "success",
          message: res.msg,
          duration: 1500,
          onClose: () => {
            searchParams = {};
            fetchCates();
          },
        });
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
};
defineOptions({
  name: "CateLists",
});
</script>

<style scoped></style>
